<template>
    <div class="login">
        <div class="bg"></div>
        <!--  -->
        <div class="logo">
            <img src="@/assets/image/youping.png" />
        </div>
        <!-- 账号登录 -->
        <van-tabs>
            <van-tab title="账号登录">
                <van-form @submit="loginByPassword">
                    <van-field
                        v-model.number="account"
                        name="account"
                        placeholder="请输入手机号"
                        :border="true"
                        :rules="[
                            { required: true, message: '请输入手机号' ,trigger:'onChange'},
                            { pattern:/^1[345678]\d{9}$/,message: '手机号格式错误' ,trigger:'onChange'}
                        ]"
                    >
                    <template #left-icon>
                        <i class="fa fa-mobile"></i>
                    </template>
                    </van-field>
                    <!-- van-field rules属性定义验证规则 -->
                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        placeholder="请输入密码"
                        :border="true"
                        :rules="[{ required: true, message: '请输入密码' }]"
                    >
                    <template #left-icon >
                        <i class="fa fa-lock"></i>
                    </template>
                    </van-field>
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
                    
                </van-form>
            </van-tab>
            <!-- 快速登录 -->
            <van-tab title="快速登录">
                <van-form @submit="loginBycode">
                    <van-field
                        v-model="account"
                        name="account"
                        placeholder="请输入手机号"
                        :border="true"
                        :rules="[
                            { required: true, message: '请输入手机号' ,trigger:'onChange'},
                            { pattern:/^1[345678]\d{9}$/,message: '手机号格式错误' ,trigger:'onChange'}
                        ]"
                    >
                    <template #left-icon>
                        <i class="fa fa-mobile"></i>
                    </template>
                    </van-field>
                    <!-- van-field rules属性定义验证规则 -->
                    <van-field
                        v-model="verfycode"
                        type="verfycode"
                        name="verfycode"
                        placeholder="请输入验证码"
                        :border="true"
                        :rules="[{ required: true, message: '请输入验证码' ,trigger:'onChange'}]"
                    >
                    <template #left-icon >
                        <i class="fa fa-lock fa-lock-code"></i>
                    </template>
                    <!-- 验证码 -->
                    <template #button>
                        <van-button :disabled="isSend" size="small" type="primary" @click="sendCode" native-type="button">
                            {{!isSend?"发送验证码":counter+"秒后继续发送"}}
                        </van-button>
                    </template>

                    </van-field>
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
                    
                </van-form>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {mapMutations,mapActions} from "vuex"
export default {
    data() {
        return {
            account: '',  //手机号
            password: '',
            verfycode:'',  //验证码
            sendkey:"",  //发送验证码需要的key
            counter:60,  //发送一次验证码间隔秒数
            timmerID:null,
            isSend:false,  //是否可以继续发送  false可以继续发送 true不能继续发送
        };
    },
    created(){
        //  第一次进入网页获取页面key 用来发送验证码
        this.axios.get("/verify_code").then(res=>{
            this.sendkey=res.key;
        })
    },
    methods: {
        // 在vuex映射一个函数过来
        ...mapMutations(["saveToken"]),  //映射Mutations函数到当前方法
        ...mapActions(["getuserInfo"]),
        /*
        13565659698
        admin8899
        */ 
        // 点击提交表单 参数是一个事件对象，对象里面存储表单数据
        loginByPassword(event){
            // console.log(event);
            // .post(url,data); //传一个对象 (data对象)
            this.axios.post("/login",event).then(result=>{
                /*
                    登录成功,会得到token值
                */ 
                // console.log("login==token==>",result);
                if(result.status==400){
                    this.$dialog.alert({
                        title:"登录提示",
                        message:result.msg  //登录失败
                    });
                    // console.log("登录失败!")
                }else{
                    this.saveToken(result.token); //调用vuex的mutations函数
                    // this.$dialog.alert({
                    //     title:"登录提示",
                    //     message:"登录成功!"
                    // }).then(()=>{
                    // })
                    this.getuserInfo();
                    this.$router.back();
                    // console.log("登录成功!")
                }
            })
        },
        // 第一次进入网页的时候【用created()】需要获取key 用verify_code 接口
        sendCode(){//发送验证码
            this.axios.post("/register/verify",{
                code:"",
                key:this.sendkey,
                phone:this.account,
                type:"login"
            }).then(re=>{
                if(re.status==200){ //验证码发送成功
                    this.$toast.success(re.msg);
                    this.isSend=true;
                    this.timmerID = setInterval(() => {
                        if(this.counter==0){
                            this.isSend=false;
                            clearInterval(this.timmerID);
                            return;
                        }
                        this.counter--;
                    }, 1000);
                }else{
                    this.$toast.fail(re.msg);
                }
            })
        },
        
        // 
        loginBycode(event){
            this.axios.post("/login/mobile",{
                phone:event.account,
                captcha:event.verfycode,
                spread:null
            }).then(re=>{
                if(re.token){
                    this.saveToken(re.token);
                    // toast提示的 关闭时的回调函数 onClose
                    this.$toast.success({
                        message:"登录成功",
                        onClose:()=>{
                            this.getuserInfo();
                            this.$router.back();
                        }
                    });
                }else{
                    this.$toast.fail(re.msg);
                }
            })
            // console.log("这是验证登录",event);
        }
    },
};
</script>
<style lang="less">
.login{
    position: relative;
    .bg{
        width:100%;
        height: 100vh;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: -1;
        background-image: linear-gradient(0deg,#ffffff,#fbf5f4,#ffffff);   
    }
    // 图片
    .logo{
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 120px;
            display: block;
        }
    }
    .fa-mobile{
        font-size: 24px;
        color: #ccc;
    }
    .fa-lock{
        font-size: 18px;
        color: #ccc;
    }
    .van-field{
        &::after{
            border-bottom-color: #bebebe;
        }
        .van-field__value{
            padding-left: 15px;
        }
    }
    .van-button--info{
        background: linear-gradient(90deg,#f35447 0,#ff8e3c);
        border: 0px;
    }
    .van-button--primary{
        background:#f35447;
        border-radius: 20px;
        border: none;
    }
    // 验证码框微调
    .fa-lock-code{
        line-height: 33px;
    }
    
}
</style>